<template>
    <div class="card-box">
        <div class="card-title">
            <span>联系人信息</span>
            <el-col :span="2" v-if='showbutton'>
                <el-button type="text" @click="addRow">新增</el-button>  |<el-button  type="text" @click="delRow">删除</el-button>
            </el-col>
        </div>
        <div class="margin-box">
            <el-form :rules="form.rules" :model="form" status-icon  ref="form" >
                <el-table  :data="form.editPersons" ref="addTable" align="center">
                    <el-table-column type="selection"/>
                    <el-table-column  width="60" label="序号" type="index"/>
                    <el-table-column  label="姓名" >
                        <template slot-scope="scope">
                            <el-form-item :prop="'editPersons.' + scope.$index + '.name'" :rules="form.rules.name">
                                <el-input class="ipt" v-model="scope.row.name"  maxlength="24" placeholder="请输入姓名，不可为空，最长为24位"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号">
                        <template slot-scope="scope">
                            <el-form-item  :prop="'editPersons.' + scope.$index + '.phone'"
                                           :rules="form.rules.phone"
                            >
                                <el-input class="ipt" v-model="scope.row.phone" maxlength="11" placeholder="请输入11位数字手机号码，不可为空" ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="电子邮件" >
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'editPersons.' + scope.$index + '.email'"
                                :rules="form.rules.email"
                            >
                                <el-input class="ipt" v-model="scope.row.email" maxlength= "32" placeholder="请输入电子邮件，不可为空"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" >
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input class="ipt" v-model="scope.row.remarks" maxlength="100" placeholder="备注可为空"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {getByclientProviderId} from '@/views/client-manage/api/clientproviderlinkinfo'
    import {validatePhone,validateEmail} from '~/utils/validate'
    export default {
        name: "person-info",
        props: {
            pid: {
                type: String
            },
            showbutton: {
                type: Boolean,
                default: true
            },
            // 是否新增
            isAdd: {
                type: Boolean,
                default: true,
            }
        },
        data() {
            const checkPhone = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入手机号码'))
                } else {
                    const reg = /^(1[123456789]\d{9})$/
                    if (reg.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确手机号码'))
                    }
                }
            }
            return {
                formVerify: true,
                clientProviderId:'',
                //校验+:
                form:{
                    editPersons:[],
                    rules: {
                        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
                        phone: [{required: true, message: '手机号码不能为空"', trigger: 'blur'},
                            {validator:checkPhone,trigger: "blur"},
                        ],
                        email:[ {required: true, message: '电子邮箱不能为空', trigger: 'blur'},
                            {validator: validateEmail, trigger: "change"},
                            {validator: validateEmail, trigger: "blur"}]
                    },
                }
            }
        },
       /* watch: {
            form: {
                handler: function (val, oldVal) {
                    this.$nextTick(()=>{
                        this.$refs.form.validate(valid => {
                            this.formVerify = (val.editPersons.length == 0 ? true : valid)

                        })
                    })
                },
                deep: true,
            },
        },*/
        /*  computed:{
          formVerify(){
                if(this.form.editPersons.length == 0) return true;
                return this.form.editPersons.every(item => {
                    return item.name && item.phone && item.email && /^[1][3,4,5,7,8][0-9]{9}$/.test(item.phone)&&
                        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(item.email)
                })
            }
        },*/
        mounted() {
            this.clientProviderId=this.pid;
            // 只有存在pid且是编辑场景才请求联系人信息数据
            this.isAdd

            this.pid && !this.isAdd && this.queryList();
        },
        methods: {
            // 添加行
            addRow(){
                this.$set(this.form.editPersons,this.form.editPersons.length,{
                    index: this.form.editPersons.length,
                    name: '',
                    phone: '',
                    email: '',
                    remarks: '',
                })
                // this.form.editPersons.push({
                //     index: this.form.editPersons.length,
                //     name: '',
                //     email:'',
                //     phone: '',
                //     remarks: '',
                // })
            },
            // 删除行
            delRow(){
                if(this.form.editPersons.length>0){
                    if(this.$refs.addTable!=undefined || this.$refs.addTable!=null){
                        let addTables = this.$refs.addTable.selection.map(item => item.index)
                        let editPersons = this.form.editPersons.filter(item => !addTables.includes(item.index))
                        this.form.editPersons = editPersons.map((item,index) => {
                            item.index = index
                            return item
                        })
                    }
                }
            },
            // 获取数据
            queryList(clientProviderId = this.pid){
                getByclientProviderId(clientProviderId).then(respdata=>{

                    let data = respdata.data.data.clientProviderLinkinfos.map((item, index) => ({...item, index}))

                    if(data && data.length) {
                        this.form.editPersons = [...data]
                    }
                })
            }
        }
    }
</script>
<style scoped lang="scss">
    .ipt{
        margin-top:18px
    }
</style>
